<template>
  <div class="common-table">
    <!-- 表格主体 -->
    <el-table
      :data="tableData"
      border
      stripe
      v-loading="isLoading"
      element-loading-text="加载中..."
    >
      <!-- 动态列渲染 -->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
      />

      <!-- 操作列（可选） -->
      <el-table-column v-if="actionConfig" :label="actionConfig.label" :width="actionConfig.width">
        <template #default="scope">
          <el-button
            v-if="actionConfig.condition(scope.row)"
            type="primary"
            size="small"
            @click="() => actionConfig.handler(scope.row)"
          >
            {{ actionConfig.text }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件（可选） -->
    <el-pagination
      v-if="pagination"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义Props类型
defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => [],
    // 示例结构: [{ prop: 'customer_name', label: '客户姓名', width: '120' }]
  },
  tableData: {
    type: Array,
    required: true,
    default: () => [],
  },
  isLoading: {
    type: Boolean,
    default: false,
  },
  actionConfig: {
    type: Object,
    default: null,
    // 示例结构: {
    //   label: '操作',
    //   width: '120',
    //   text: '分配站点',
    //   condition: (row) => row.status === '待分配站点',
    //   handler: (row) => {}
    // }
  },
  pagination: {
    type: Object,
    default: null,
    // 示例结构: { total: 100, currentPage: 1, pageSize: 10 }
  },
})

// 定义事件
const emits = defineEmits(['page-change', 'size-change'])

// 分页事件处理
const handlePageChange = (page) => {
  emits('page-change', page)
}

const handleSizeChange = (size) => {
  emits('size-change', size)
}
</script>
